<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">物品申领及库存(校服被子等) / 使用日志 /</div>
            <div style="margin-bottom: 10px; display: flex; align-items: center;">
                <el-date-picker v-model="daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" unlink-panels="true" :default-value="new Date">
                </el-date-picker>
                <el-input v-model="name" placeholder="物品名称" style="width: 210px;" clearable></el-input>
                <el-input v-model="type" placeholder="物品分类" style="width: 210px;" clearable></el-input>
                <el-input v-model="size" placeholder="物品型号" style="width: 210px;" clearable></el-input>
                <el-select v-model="schoolId" clearable filterable placeholder="配送点" v-if="${school.role!0} == 1">
                    <el-option v-for="item in schools" :key="item.attrs.id" :label="item.attrs.name" :value="item.attrs.id">
                    </el-option>
                </el-select>
                <el-select v-model="isUse" clearable filterable placeholder="出入库" v-if="${school.role!0} == 1">
                    <el-option label="出库" value="1"></el-option>
                    <el-option label="入库" value="2"></el-option>
                </el-select>
                <el-button @click="onSearch"><i class="el-icon-search"></i>搜索</el-button>
            </div>
            <table class="am-table table">
                <thead>
                    <tr>
                        <th>使用日期</th>
                        <th>物品</th>
                        <th>分类</th>
                        <th>型号</th>
                        <th>数量</th>
                        <th>总数</th>
                        <th>单位</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td class="am-text-middle">{{ item.attrs.date }}</td>
                        <td class="am-text-middle">{{ item.attrs.name }}</td>
                        <td class="am-text-middle">{{ item.attrs.type }}</td>
                        <td class="am-text-middle">{{ item.attrs.size }}</td>
                        <td class="am-text-middle">{{ item.attrs.count | numFix }}</td>
                        <td class="am-text-middle">{{ item.attrs.after }}</td>
                        <td class="am-text-middle">{{ item.attrs.schoolName }}</td>
                        <td class="am-text-middle">
                            <button class="am-btn am-btn-danger am-btn-xs" @click="del(item.attrs.id)"><i class="am-icon-trash"></i>&nbsp;删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <#include "/boya/template/page.html" />
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                daterange: '',
                schools: [],
                schoolId: '',
                isUse: '',
                name: '',
                type: '',
                size: ''
            }
        },
        mounted: function() {
            var jsonStr = '${list!}';
            if (jsonStr != '') {
                this.list = ${list!}
            }
            var schoolStr = '${schools!}';
            if (schoolStr != '') {
                this.schools = ${schools!'[]'}
            }
            var schoolId = '${schoolId!""}'
            if (schoolId != '') {
                this.schoolId = Number(schoolId);
            }
            var startTime = '${startTime!}'
            if (startTime != '') {
                this.daterange = new Array;
                this.daterange.push('${startTime!}');
                this.daterange.push('${endTime!}');
            }
            var isUseStr = '${isUse!}';
            if (isUseStr != '') {
                this.isUse = isUseStr
            }
            var name = '${name!}';
            if (name != '') {
                this.name = name
            }
            var type = '${type!}';
            if (type != '') {
                this.type = type
            }
            var size = '${stockSize!}';
            if (size != '') {
                this.size = size
            }
        },
        methods: {
            del(id) {
                var self = this;
                confirm("确认删除？", function() {
                    var param = Qs.stringify({
                        id: id
                    });
                    axios({
                        url: '/boya/delStockLog',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            // msg("删除成功");
                            window.location.reload();
                        } else {
                            msg("删除失败");
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        msg("删除失败");
                        console.log(error);
                    });
                })
            },
            onSearch() {
                var self = this;
                var keys = [
                    { key: 'schoolId', value: self.schoolId },
                    { key: 'isUse', value: self.isUse },
                    { key: 'name', value: self.name },
                    { key: 'type', value: self.type },
                    { key: 'size', value: self.size }
                ]
                if (self.daterange != null && self.daterange.length > 1) {
                    keys.push({ key: 'startDate', value: self.daterange[0] });
                    keys.push({ key: 'endDate', value: self.daterange[1] });
                } else {
                    keys.push({ key: 'startDate', value: '' });
                    keys.push({ key: 'endDate', value: '' });
                }
                goPage(1, keys);
            },
            onPageChange(val) {
                goPage(val);
            }
        },
        filters: {
            numFix: function(value) {
                return Number(value) > 0 ? "+" + value : value;
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 10px;
        font-size: 1.2em;
    }
    </style>
</body>

</html>